let socket;
let self_userid;
let order;
let userls;
let container_pokers = document.querySelectorAll('.Pokers')[0];
let container_top = document.querySelectorAll('.pokers_top')[0];
let container_center = document.querySelectorAll('.pokers_center')[0];

// 设置点击间隔时间（单位：毫秒）
const CLICK_INTERVAL = 3000; // 3秒

// 显示提示框并自动消失的函数
function showAlert(message, duration = 3000) {
    const alertElement = document.getElementById('alert');
    if (alertElement) {
        alertElement.textContent = message; // 设置提示内容
        alertElement.style.display = 'flex'; // 显示提示框

        // 3 秒后隐藏提示框
        setTimeout(() => {
            alertElement.style.display = 'none';
        }, duration);
    }
}

// 处理按钮点击的函数
function handleButtonClick(button, callback) {
    if (button.prop("disabled")) {
        // 按钮已被禁用，直接返回
        return;
    }

    // 禁用按钮
    button.prop("disabled", true);

    // 设置定时器，在指定时间后重新启用按钮
    setTimeout(() => {
        button.prop("disabled", false);
    }, CLICK_INTERVAL);

    // 执行回调函数
    if (callback) callback();
}

// 建立连接
function connect(roomid, userid) {
    var basePath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
    var socketUrl = basePath + roomid + "/" + userid;
    socket = new WebSocket(socketUrl);
    self_userid = userid;

    // 监听消息
    socket.onmessage = function (event) {
        console.log("收到消息：" + event.data);

        // 处理消息
        // 尝试将消息转换为JSON格式
        var jsonData;
        try {
            jsonData = JSON.parse(event.data);
            console.log("解析后的JSON数据：", jsonData);

            // 处理玩家信息
            if (jsonData["type"] == "userinfo") {
                // 隐藏等待界面
                $("#waiting-screen").fadeOut();
                userls = jsonData["players"];
                for (var i = 0; i < 3; i++) {
                    selforder(jsonData["players"][i]);
                }
                for (var i = 0; i < 3; i++) {
                    setuserinfo(jsonData["players"][i]);
                }
            }
            // 处理usermsg类型消息
            else if (jsonData["type"] == "usermsg") {
                for (var i = 0; i < 3; i++) {
                    if (userls[i]["userId"] == jsonData["sender"]) {
                        setmsg(userls[i]["order"], jsonData["content"]);
                    }
                }
            }
            // 处理poker类型信息，用来刷新扑克牌
            else if (jsonData["type"] == "poker") {
                var num = jsonData["pokerlist"].length;
                var list = jsonData["pokerlist"];
                handpoker(container_pokers, num, list);
            }
            // 处理loadPokers类型信息，用来刷新地主牌
            else if (jsonData["type"] == "loadPokers") {
                var num = jsonData["pokerlist"].length;
                var list = jsonData["pokerlist"];
                toppoker(container_top, num, list);
            }
            // 处理 hand_poker 类型数据 玩家出牌，用来更新中间牌堆、自己的手牌
            else if (jsonData["type"] == "hand_poker") {
                var self_num = jsonData["retainpokers"].length;
                var self_list = jsonData["retainpokers"];
                remove_img(container_pokers, self_num, self_list);
            }
            // 清空中间牌堆
            else if (jsonData["type"] == "clear_center") {
                clear_centerpoker(container_center);
            }
            // 处理 ROB_MASTER 类型数据 玩家抢地主操作
            else if (jsonData["type"] == "ROB_MASTER") {
                showAlert("恭喜您抢到地主！"); // 使用 showAlert 函数显示提示框
                var num = jsonData["pokerlist"].length;
                var list = jsonData["pokerlist"];
                remove_img(container_pokers, num, list);
            }
            // 处理服务器发来的提示信息，一般是请求出现错误
            else if (jsonData["type"] == "alert") {
                var str = jsonData["message"];
                console.log(str);
                showAlert(str); // 使用 showAlert 函数显示提示框

                if (jsonData["action"] != "") {
                    if (jsonData["action"] == "hind") {
                        // $("#qdz").hidden;
                    }
                }
            }
            // 处理更新操作
            if (jsonData.hasOwnProperty("update")) {
                var json = jsonData["update"];
                var ls = json["players_handnum"];
                console.log(json);
                for (var i = 0; i < 3; i++) {
                    if (userls[i]["userId"] == json["current"]) {
                        current_user(userls[i]["order"]);
                    }
                    update(ls[i]);
                }
                if (jsonData.hasOwnProperty("center_pokers")) {
                    var center_num = jsonData["center_pokers"].length;
                    var center_list = jsonData["center_pokers"];
                    centerpoker(container_center, center_num, center_list);
                }
                if (jsonData.hasOwnProperty("setimg_landlord")) {
                    setuserimg(jsonData["setimg_landlord"]);
                }
            }

            // 处理音效
            if(jsonData.hasOwnProperty("music")){
                playsound(jsonData["music"]);
            }

            // 处理 Game_Over 类型数据 游戏结束
            else if (jsonData["type"] == "Game_Over") {
                var str = "恭喜玩家： ";
                for (var i = 0; i < jsonData["win_users"].length; i++) {
                    str = str + jsonData["win_users"][i];
                    str = str + " ";
                }
                str = str + "获胜！";
                alert(str);
                window.location.href = "../index.jsp";
            }
            // 处理错误情况
            if (jsonData["type"] == "error") {
                alert(jsonData["msg"]);
                window.location.href = "../index.jsp";
            }
        } catch (error) {
            console.error("解析消息为JSON时出错：", error);
        }
    };

    // 监听服务器关闭事件
    socket.onclose = function (event) {
        console.log("服务端已关闭连接，关闭原因：" + (event.reason || '未知原因'));
        console.log("关闭代码：" + event.code);
        alert("房间已关闭！");
        window.location.href = "../index.jsp";
    };

    // 监听连接错误事件
    socket.onerror = function (event) {
        console.log("连接出现错误：" + (event.message || '未知错误'));
        alert("连接错误！房间已关闭！");
        window.location.href = "../index.jsp";
    };
}

// 设置自身出牌顺序
function selforder(jsonData) {
    if (jsonData["userId"] == self_userid) {
        console.log("已设置顺序");
        order = jsonData["order"];
    }
}

// 设置玩家信息
function setuserinfo(jsonData) {
    if (relative_position(jsonData["order"]) == 0) {
        $("#self_name").html(jsonData["username"]);
        $("#self_hand").html("");
        $("#self_score").html("玩家积分：" + jsonData["score"]);
    } else if (relative_position(jsonData["order"]) == 1) {
        $("#left_name").html(jsonData["username"]);
        $("#left_hand").html("");
        $("#left_score").html("玩家积分：" + jsonData["score"]);
    } else if (relative_position(jsonData["order"]) == 2) {
        $("#right_name").html(jsonData["username"]);
        $("#right_hand").html("");
        $("#right_score").html("玩家积分：" + jsonData["score"]);
    }
}

// 设置玩家头像
function setuserimg(landlord) {
    for (var i = 0; i < 3; i++) {
        if (userls[i]["userId"] == landlord) {
            foundimg(userls[i]["order"], "../resources/img/landholder.png");
        } else {
            foundimg(userls[i]["order"], "../resources/img/peasant.png");
        }
    }
}

function foundimg(order, imgurl) {
    if (relative_position(order) == 0) {
        $('#self_img').css('background-image', 'url(' + imgurl + ')');
    } else if (relative_position(order) == 1) {
        $('#left_img').css('background-image', 'url(' + imgurl + ')');
    } else if (relative_position(order) == 2) {
        $('#right_img').css('background-image', 'url(' + imgurl + ')');
    }
}

// 更新玩家信息
function update(jsonData) {
    if (relative_position(jsonData["order"]) == 0) {
        $("#self_hand").html("剩余手牌：" + jsonData["handnum"]);
    } else if (relative_position(jsonData["order"]) == 1) {
        $("#left_hand").html("剩余手牌：" + jsonData["handnum"]);
    } else if (relative_position(jsonData["order"]) == 2) {
        $("#right_hand").html("剩余手牌：" + jsonData["handnum"]);
    }
}

// 标注出牌玩家
function current_user(order) {
    $(".left").css("background-color", "rgba(0, 0, 0, 0)");
    $(".right").css("background-color", "rgba(0, 0, 0, 0)");
    $(".bottom").css("background-color", "rgba(0, 0, 0, 0)");

    if (relative_position(order) == 0) {
        $(".bottom").css("background-color", "lightgreen");
    } else if (relative_position(order) == 1) {
        $(".left").css("background-color", "lightgreen");
    } else if (relative_position(order) == 2) {
        $(".right").css("background-color", "lightgreen");
    }
}

// 获取相对位置
function relative_position(other_order) {
    if (order == 0) {
        return other_order;
    } else if (order == 1) {
        if (other_order == 2) {
            return 1;
        } else if (other_order == 0) {
            return 2;
        } else {
            return 0;
        }
    } else if (order == 2) {
        if (other_order == 0) {
            return 1;
        } else if (other_order == 1) {
            return 2;
        } else {
            return 0;
        }
    }
}

// 设置消息并自动消失
function setmsg(order, content) {
    let msgElement;
    if (relative_position(order) == 0) {
        msgElement = $("#self_msg");
    } else if (relative_position(order) == 1) {
        msgElement = $("#left_msg");
    } else if (relative_position(order) == 2) {
        msgElement = $("#right_msg");
    }

    if (msgElement) {
        msgElement.html(content); // 设置消息内容
        msgElement.css("display", "flex"); // 显示提示框
        msgElement.css("opacity", "1"); // 确保提示框不透明

        // 5 秒后触发淡出动画
        setTimeout(() => {
            msgElement.css("opacity", "0"); // 触发淡出动画

            // 淡出动画结束后隐藏提示框
            setTimeout(() => {
                msgElement.css("display", "none");
            }, 500); // 等待淡出动画完成
        }, 5000); // 5000 毫秒 = 5 秒
    }
}

function sendmsg(msg) {
    socket.send(msg);
}

// 发送按钮点击事件
$("#massage").click(function () {
    handleButtonClick($(this), function () {
        if ($("#usermsg").val() == "") {
            showAlert("请先输入要发送的消息");
        } else {
            if ($("#usermsg").val().length >= 100) {
                showAlert("消息不能超过100字符！");
                return;
            }
            var jsonObj = { "type": "usermsg" };
            jsonObj.content = $("#usermsg").val();
            jsonObj.sender = self_userid;
            sendmsg(JSON.stringify(jsonObj));
        }
    });
});

// 出牌按钮点击事件
$("#hand").click(function () {
    handleButtonClick($(this), function () {
        // 清空上一次提示信息
        $("#alert").html("");
        // 获取选择的牌的id
        var idArray = [];
        $('.Be_selected').each(function () {
            idArray.push($(this).attr('id'));
        });
        var jsonString = {
            "type": "hand_poker",
            "pokerlist": idArray,
            "sender": self_userid
        };
        sendmsg(JSON.stringify(jsonString));
    });
});

// 抢地主按钮点击事件
$("#qdz").click(function () {
    handleButtonClick($(this), function () {
        $("#alert").html("");
        var jsonString = {
            "type": "ROB_MASTER",
            "sender": self_userid
        };
        sendmsg(JSON.stringify(jsonString));
    });
});

// 要不起按钮点击事件
$("#pass").click(function () {
    handleButtonClick($(this), function () {
        $("#alert").html("");
        var jsonString = {
            "type": "PASS",
            "sender": self_userid
        };
        sendmsg(JSON.stringify(jsonString));
    });
});

// 背景音乐按钮点击事件
$("#bgm").click(function () {
    playbgm();
});

// 捕捉卢本伟语音包下拉列表的改变事件
$('#lbw').on('change', function () {
    var currentSelectedValue = $(this).val();
    var jsonObj = { "type": "usermsg", "music": currentSelectedValue };
    jsonObj.content = $(this).find('option:selected').text();
    jsonObj.sender = self_userid;
    sendmsg(JSON.stringify(jsonObj));

    // 重置下拉列表为第一个选项
    $(this).val($('#lbw option:first').val());
});

// // 定义一个标志变量，用于区分是关闭浏览器还是其他页面卸载情况
// let isClosingBrowser = false;
//
// // window.addEventListener('beforeunload', function (event) {
// //     // 判断是否是关闭浏览器的操作
// //     if (event.currentTarget === window && window.outerWidth === 0 && window.outerHeight === 0) {
// //         isClosingBrowser = true;
// //     }
// //     // 只有在确定是关闭浏览器时才发起销毁会话的AJAX请求
// //     if (isClosingBrowser) {
// //         var xhr = new XMLHttpRequest();
// //         xhr.open('GET', '/destroySession', true);
// //         xhr.send();
// //     }
// // });